<html lang="en">

<head th:include="templates/common :: header" /> 

<body>
	<div class="container" style="margin-top: 40px;">
		<div th:include="templates/common :: menu" />
		
		<div class="alert alert-danger" th:if="${not #strings.isEmpty(status) and status == 'profile.password.edit.incorrect'}">
				<a class="close">x</a>
				<p class="status" th:if="${not #strings.isEmpty(status)}" th:utext="#{${status}}">Status</p>
			</div>

			<div class="alert alert-danger" th:if="${not #strings.isEmpty(status) and status == 'profile.password.edit.notmatch'}">
				<a class="close">x</a>
				<p class="status" th:if="${not #strings.isEmpty(status)}" th:utext="#{${status}}">Status</p>
			</div>
			
			<div class="alert alert-danger" th:if="${not #strings.isEmpty(status) and status == 'profile.password.edit.empty'}">
				<a class="close">x</a>
				<p class="status" th:if="${not #strings.isEmpty(status)}" th:utext="#{${status}}">Status</p>
			</div>
			
			<div class="alert alert-success" th:if="${not #strings.isEmpty(status) and status == 'profile.password.edit.success'}">
				<a class="close">x</a>
				<p class="status" th:if="${not #strings.isEmpty(status)}" th:utext="#{${status}}">Status</p>
			</div>
			<div class="alert alert-danger" th:if="${not #strings.isEmpty(status) and status == 'profile.password.edit.failure'}">
				<a class="close">x</a>
				<p class="status" th:if="${not #strings.isEmpty(status)}" th:utext="#{${status}}">Status</p>
			</div>
			
			<div class="alert alert-success" th:if="${not #strings.isEmpty(status) and status == 'profile.edit.success'}">
				<a class="close">x</a>
				<p class="status" th:if="${not #strings.isEmpty(status)}" th:utext="#{${status}}">Status</p>
			</div>
		
		<div class="panel panel-primary">
			<div class="panel-heading" th:text="#{profile.label}"></div>
	  		<div class="panel-body">	
				<form id="profileForm" action="#" th:object="${user}" th:action="@{/users/profile/edit}" method="post" class="form-horizontal">
					<div class="form-group">
						<label class="col-lg-2 control-label" th:text="#{profile.firstname}"/>
						<div class="col-lg-3">	
							<input id="hiddenID" type="hidden" th:field="*{id}" />						
							<label class="col-lg-2 control-label" th:text="*{firstName}"/>
						</div>
					</div>
					
					<div class="form-group">
						<label class="col-lg-2 control-label" th:text="#{profile.lastname}"/>
						<div class="col-lg-3">
							<label class="col-lg-2 control-label" th:text="*{lastName}"/>							
						</div>
					</div>
					
					<div class="form-group">
						<label class="col-lg-2 control-label" th:text="#{profile.username}"/>
						<div class="col-lg-3">
							<label class="col-lg-2 control-label" th:text="*{userName}"/>
						</div>
					</div>
					
					<div class="form-group">
						<label class="col-lg-2 control-label" th:text="#{profile.email}"/>
						<div class="col-lg-3">
							<label class="col-lg-2 control-label" th:text="*{email}"/>
						</div>
					</div>					
					
					<div class="form-group">
						<label class="col-lg-2 control-label" th:text="#{profile.role}"/>
						<div class="col-lg-3">
							<label class="col-lg-2 control-label" th:text="*{roles.roleName}"/>
						</div>
					</div>					
					
					<div class="form-group">
						<div class="col-lg-offset-2 col-lg-2">
							<button id="submitProfileForm" type="submit" class="btn btn-primary btn-block" th:text="#{profile.change}" /> 
						</div>
					</div>		
									
				</form>						
			</div>
		</div>
	</div>
	
	<script type="text/javascript"> 
		 $(document).ready(function() {
		    $('.chzn-select').select2({});
		 });
	</script>
</body>
</html>